<template>
    <!-- <view class="content" :style="'background-image: url(' + $c.config.media + 'yuemini/reg_bg.png);'"> -->
		<view class="content" :style="'background-image: url(/static/images/reg_bg.png);'">
        <view class="warp">
           <!-- <c-gap height="100rpx" /> -->
		<!--   <view style="height: 100rpx;"></view>
            <view class="nav-bar banxin">
                <view><uni-icons type="back" size="24" color="#fff" @tap="$c.jump(1, 5)"></uni-icons></view>
                <view class="title">居住地</view>
            </view> -->
            <!-- <c-gap height="102rpx" /> -->
			  <view style="height: 102rpx;"></view>
            <view class="sex-title">你的居住地是？</view>
          <!--  <c-gap height="60rpx" /> -->
		    <view style="height: 60rpx;"></view>

            <view>
				<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" mask-style="background:transparent;">
				    <picker-view-column>
				        <view class="item" :class="{ select: item == year }" v-for="(item, index) in provinces" :key="index">{{ item.province }}</view>
				    </picker-view-column>
				    <picker-view-column>
				        <view class="item" :class="{ select: item == month }" v-for="(item, index) in citys" :key="index">{{ item.city }}</view>
				    </picker-view-column>
				   <picker-view-column>
				        <view class="item" :class="{ select: item == day }" v-for="(item, index) in names" :key="index">{{ item.name }}</view>
				    </picker-view-column>
				</picker-view>
            </view>
            <!-- <c-gap height="60rpx" /> -->
			<view style="height: 60rpx;"></view>
            <view class="register-btn1" @tap="next">继续</view>
        </view>
    </view>
</template>

<script>
import address from '@/common/address.js';
//import CGap from '@/components/c-gap.vue';
export default {
	//components: { CGap },
    data() {
       
        return {
            $c: this.$c,
            current: 0,
            swiperHeight: 0,
			provinces:[],
			citys:[],
			names:[],
			provincesid:1,
			citysid:1,
			namesid:1,			
            data: {
                device: '478ca4671a993355',
                sex: '1',
                nickname: '',
                birthday: '',
                height: '',
                weight: '',
                career: '',
                income: '',
                save_city: '',
                avatar: '',
                phone: '',
                code: '',
                password: '',
                phone_model: 'RMX3366'			
            },
            title: 'picker-view',
            value: [0, 0, 0],
            indicatorStyle: `height: 50px;`,
			year:'',
			month:'',
			day:''
        };
    },
    onLoad() {
        this.data = uni.getStorageSync('registerInfo');
       
    },
	
	onShow() {
		 this.getData();
	},
	
    methods: {
		
		
        async getData() {
			  let res = await this.$c.post('/app/geren/sslist');
			 
			  this.provinces=res.data.list;
			  this.citys = this.provinces[0].citiesList;
			  this.names = this.citys[0].areaList;
			  
		 //      console.log(this.provinces[3].province+'************'+ this.citys[2].city+'&&&&&&&&&&'+ this.names[0].name);	 
			
			this.provincesid = this.provinces[0].provinceid;
			this.citysid =   this.citys[0].cityid;
			this.namesid = 	 this.names[0].id;	 
						
      
        },
        bindChange: function (e) {
            const val = e.detail.value;
         
			this.citys = this.provinces[val[0]].citiesList;
			this.names = this.citys[val[1]].areaList;
			
			this.provincesid = this.provinces[val[0]].provinceid;
			this.citysid =  this.citys[val[1]].cityid;
			this.namesid = 	this.names[val[2]].id;	 
			
			// console.log(this.provincesid+'************'+ this.citysid+'&&&&&&&&&&'+ this.namesid);	
        },
        async next() {
			let res = await this.$c.post('/app/geren/saveaddress?provinceid=' + this.provincesid+'&cityid='
			+this.citysid+'&areaId='+this.namesid);		
            uni.setStorageSync('registerInfo',this.data);
            // this.$c.jump('/pages/m-pages/m-login/register7');
			uni.switchTab({
				 url: '/pages/m-pages/m-home/dazi'
			});
        }
    }
};
</script>

<style lang="scss">
.content {
    width: 750rpx;
    height: 100vh;
    background-size: 750rpx 100vh;
    //background-repeat: no-repeat;
    background-position: 0 0;
    .warp {
        width: 702rpx;
        margin: 0 auto;
        .nav-bar {
            display: flex;
            font-weight: 550;
            font-size: 34rpx;
            color: #fff;
            .title {
                width: 680rpx;
                text-align: center;
				color: #000;
            }
        }
        .sex-title {
            font-weight: 600;
            font-size: 48rpx;
            color: #fff;
            line-height: 62rpx;
        }
        .register-btn1 {
            margin: 0 auto;
            text-align: center;
            line-height: 120rpx;
            color: #a14617;
            width: 552rpx;
            height: 120rpx;
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            background: linear-gradient(127deg, #fff4de 0%, #ffe6ba 100%, #ffe6ba 100%);
            border-radius: 60rpx;
        }

        .picker-view {
            width: 702rpx;
            height: 600rpx;
        }
        .item.select {
            color: #000;
            font-size: 36rpx;
            font-weight: 600;
        }
        .item {
            height: 50px;
            line-height: 50px;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #999999;
        }
        .picker-view /deep/.uni-picker-view-mask,
        .picker-view .uni-picker-view-mask {
            background: transparent;
        }
        .picker-view /deep/.uni-picker-view-indicator {
            border-top: 2rpx solid #ccc;
            border-bottom: 2rpx solid #ccc;
        }
    }
}
</style>
